<template>
  <div class="main">
    <!--服务内容部分-->
    <div class="server_content">
      <h3>服务内容</h3>
      <ul>
        <li>受业主大会组织方委托，以第三方公平、公正、专业的身份，</li>
        <li>小区服务质量的监管，小区服务设施设备的查验</li>
        <li>提供业主大会《业主大会表决票》的发放、回收、开箱、唱票、计票、监票的服务</li>
      </ul>
    </div>
    <!--服务项目部分-->
    <div class="server_project">
      <h3>服务项目</h3>
      <div class="row_project">
        <div class="one">
          <h6>业主大会召开的举办</h6>
        </div>
        <div class="two">
          <h6>物业招标顾问</h6>
        </div>
        <div class="three">
          <h6>业务委员会顾问</h6>
        </div>
        <div class="four">
          <h6>小区物业服务质量监理</h6>
        </div>
        <div class="five">
          <h6>小区设施设备的查验</h6>
        </div>
      </div>
    </div>
    <!--服务依据部分-->
    <div class="server_basis">
      <h3>服务依据</h3>
      <ul>
        <li>根据国家《物权法》，国家，省，市《物业管理条例》</li>
        <li>《物业服务合同》《小区管理规约》，《物业服务管理方案》</li>
        <li>以及约定服务(标准)，物业费价格，专业技术规范</li>
        <li>和法律法规等其他相关规定进行物业服务质量跟踪监理</li>
      </ul>
    </div>
    <!--招标公告部分-->
    <div class="tender">
      <h3>招标公告</h3>
      <div class="box_banner">
        <div class="tender_banner"></div>
        <p>
          本招标项目（项目名称）已由（项目审批、核准或备案机关名称）以（批文名称及编号）批准建设，
          项目业主为，建设资金来自（资金来源），项目出资比例为，招标人为。项目已具备招标条件，现对该项目的施工进行公开招标。
        </p>
      </div>
      <div class="tender_all">
        <div class="te_list" v-for="item in callbids" @click="toMyDetail(item.id)">
          <p>{{item.title}}</p>
        </div>
      </div>
    </div>
    <!--中标公告部分-->
    <div class="bid">
      <h3>中标公告</h3>
      <div class="box_banner">
        <div class="bid_banner"></div>
        <p>
          本招标项目（项目名称）已由（项目审批、核准或备案机关名称）以（批文名称及编号）批准建设，
          项目业主为，建设资金来自（资金来源），项目出资比例为，招标人为。项目已具备招标条件，现对该项目的施工进行公开招标。
        </p>
      </div>
      <div class="bid_all">
        <div class="bi_list" v-for="list in winbids" @click="toMyDetail(list.id)">
          <p>{{list.title}}</p>
        </div>
      </div>
    </div>
    <!--联系部分-->
    <div class="lianxi">
      <button @click="toDetail" class="btn_two">
        <span>电话咨询</span>
      </button>
    </div>
  </div>
</template>
<style>
  .main {
    width: 90%;
    /*height: 700px;*/
    /*background: red;*/
    margin-left: 5%;
  }

  /*服务内容部分*/
  .server_content h3 {
    text-align: center;
    font-size: 16px;
    padding-top: 20px;
    color: #403d3d;
  }

  .server_content ul {
    list-style: none;
    padding: 0;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    color: #807d7d;
  }

  /*服务项目部分*/
  .server_project h3 {
    text-align: center;
    font-size: 16px;
    padding-top: 20px;
    color: #00a2e9;
  }

  .row_project {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }
.row_project div{
  display: flex;
  justify-content: space-between;
}
  .row_project h6 {
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    margin-top: 30px;
  }

  .row_project .one {
    width: 19%;
    height: 97px;
    background: url("../images/project_bg.png") no-repeat;
    background-position: center;
    display: inline-block;
  }

  .row_project .two {
    width: 19%;
    height: 97px;
    background: url("../images/project_bg.png") no-repeat;
    background-position: center;
    display: inline-block;
  }

  .row_project .three {
    width: 19%;
    height: 97px;
    background: url("../images/project_bg.png") no-repeat;
    background-position: center;
    display: inline-block;
  }

  .row_project .four {
    width: 19%;
    height: 97px;
    background: url("../images/project_bg.png") no-repeat;
    background-position: center;
    display: inline-block;
  }

  .row_project .five {
    width: 19%;
    height: 97px;
    background: url("../images/project_bg.png") no-repeat;
    background-position: center;
    display: inline-block;
  }

  /*服务依据部分*/
  .server_basis h3 {
    text-align: center;
    font-size: 16px;
    padding-top: 20px;
    color: #403d3d;
  }

  .server_basis ul {
    list-style: none;
    color: #807d7d;
    padding: 0;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
  }

  /*招标公告部分*/
  .tender {
    margin-top: 40px;
  }
  .tender h3 {
    font-size: 16px;
    color: #403d3d;
  }
  .tender .box_banner {
    border-bottom: 1px dotted #c3c3c3;
  }
  .tender_banner {
    width: 100%;
    height: 200px;
    background: url("../images/zhaobiao_banner.jpg");
    background-position: center;
    background-size: 100% 200px;
  }
  .box_banner p{
    font-size: 12px;
    color: #807d7d;
    margin-top: 10px;
    margin-bottom: 20px;

  }
  .tender_all{
    margin-top: 20px;
  }
  .te_list{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #c3c3c3;
  }
  .te_list p{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  /*中标公告部分*/
  .bid {
    margin-top: 40px;
    padding-bottom: 20px;
  }
  .bid h3 {
    font-size: 16px;
    color: #403d3d;
  }
  .bid .box_banner {
    border-bottom: 1px dotted #c3c3c3;
  }
  .bid_banner {
    width: 100%;
    height: 200px;
    background: url("../images/zhongbiao_banner.jpg");
    background-position: center;
    background-size: 100% 200px;
  }
  .box_banner p{
    font-size: 12px;
    color: #807d7d;
    margin-top: 10px;
    margin-bottom: 20px;

  }
  .bid_all{
    margin-top: 20px;
  }
  .bi_list{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #c3c3c3;
  }
  .bi_list p{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  /*联系部分*/
  .lianxi{
    width: 100%;
    padding-bottom: 20%;
    text-align: center;
  }
  .btn_one{
    width: 120px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f2f2f2;
    outline: none;
  }
  .btn_two{
    width: 120px;
    height: 40px;
    border: none;
    background: #00a2e9;
    border-radius: 10px;
    /*margin-left: 10px;*/
    outline: none;
    color: #fff;
  }
</style>
<script>

  import {getGroupData} from 'http/article.js'

  export default {
    name: 'news',
    data() {
      return {
        callbids:[],
        winbids:[]
      }
    },
    created(){
      // 招标
      this._getCallBids('callbids')
      // 中标
      this._getCallBids('winbids')
    },
    methods:{
      toDetail() {
        this.$router.push('phone')
      },
//      toNoticeDetail(id){
//        this.$router.push('/News/noticeDetail/'+id)
//      },
      toMyDetail(id){
        this.$router.push('/News/noticeDetail/'+id)
      },
      _getCallBids(tag) {
        getGroupData(tag).then((res) => {
          let data = res.data
          if(tag === 'callbids'){
            this.callbids = data
          }else{
            this.winbids = data
          }
        })
      }
    }
  }
</script>
